<template>
        <!-- 
             先创建基本的样式

             1. vue 项目中引入iconfont
             2. 实现双向数据绑定，在js层拿到用户的数据
                 （1） input 标签，value属性， input或change事件
                 （2） 绑定一个动态的 value属性
                 (3) 添加input事件，通过事件对象，获取到input标签输入的内容
            3. 进行校验
                （1） 

         -->

   <div class="w-input">
        <div>
            <i class="iconfont icon-mima"></i>
            <input type="password" :value="value" @input="getValue" @blur="blur">
            <i class="iconfont icon-shanchu" v-if="showP"></i>

        </div>      

        <!-- 校验  当这个input没有内容，脱标 =》 进行校验 -->
        <div class="pass" v-if="showP">请输入密码</div>

   </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';

// 泛型 =》 这个方法使用了，才决定数据类型
let value = ref<number|string>('')
let showP = ref<boolean>(false)

const getValue = (e:any)=>{
    // console.log(e.target.value);
    value.value = e.target.value    // value.value 是密码框的值
    // console.log(value.value);
}

// 子组件给父组件数据
let emits = defineEmits(['getPassw']);

const blur = ()=>{
    if(!value.value){
        showP.value = true
    }else{
        showP.value = false
    }
    emits('getPassw',value.value)  // value.value 是密码框的值
}

</script>


<style scoped lang="scss">
.w-input{
    background: #fff;
    padding: 0;
    padding-left: 10px;
    border: 1px solid #ccc;
    height: 30px;
    width: 100%;
    border-radius: 3px;
    position: relative;
    // margin-left: -60px;
    input{
        border: none;
        outline: none;
        margin-left: 5px;
        // padding: 5px 0;
        background-color: pink;
        // width: 84%;
        width: 90%;
        height: 22px;

    }
    i{
        color: orange;
    }
    .pass{
        position: absolute;
        bottom:-26px;
        font-size: 12px;
        left: 0;
        color: #f56c6c;
    }
    .icon-shanchu{
        position: absolute;
        right: 10px;
    }
}
</style>